<template>
    <div class="answer" v-loading="loading">
        <el-tabs type="border-card">
            <el-tab-pane label="题目">
                <el-timeline v-if="answerItem.data && answerItem.data.length">
                    <el-timeline-item :timestamp="dayjs(item[0].createTime).format('YYYY-MM-DD')" placement="top" 
                    v-for="(item, index) in answerItem.data" :key="index"
                    >
                        <answerItemList :list="item"/>
                    </el-timeline-item>
                </el-timeline>
                <el-empty v-else description="还没有答题哦！">
                    <el-button type="primary" @click="setPath('/student/homeTopic')">去答题</el-button>
                </el-empty>
            </el-tab-pane>
            <el-tab-pane label="试卷">
                <el-timeline v-if="answer.data && answer.data.length">
                    <el-timeline-item
                    v-for="(item, index) in answer.data" :key="index"
                    :timestamp="dayjs(item[0].answer.submitTime || item[0].answer.createTime).format('YYYY-MM-DD')"
                    placement="top"
                    >
                        <answerList :list="item"/>
                    </el-timeline-item>
                </el-timeline>
                <el-empty v-else description="还没有做试卷哦！">
                    <el-button type="primary" @click="setPath('/student/homePaper')">去做卷</el-button>
                </el-empty>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import { getAnswerList } from '@/api/answer'
    import { getAnswerItemList } from '@/api/answerItem'
    import answerItemList from '@/components/answer/answerItemList.vue'
    import answerList from '@/components/answer/answerList.vue'
    import { mapMutations } from 'vuex'
    export default {
        components : {
            answerItemList,
            answerList,
        },
        data() {
            return {
                answerItem : {
                    data : []
                },
                answer : {
                    data : []
                },
                loading : false
            }
        },
        created(){
            this.getData()
        },
        methods : {
            ...mapMutations(['setPath']),
            getData(){
                this.loading = true
                getAnswerItemList({
                    page : 1,
                    limit : 100
                }).then(res => {
                    this.loading = false
                    if(res.code == 200){
                        this.answerItem = this.parseList(res.data)
                    }
                })
                getAnswerList({
                    page : 1,
                    limit : 100
                }).then(res => {
                    if(res.code == 200){
                        this.answer = this.parseList(res.data)
                    }
                })
            },
            
            parseList(params){
                let data = []
                let obj = undefined
                params.list.forEach(n => {

                    let objTime = !obj || obj.createTime || obj.answer.submitTime || obj.answer.createTime
                    let nTime = n.createTime || n.answer.submitTime || n.answer.createTime

                    if (data.length == 0 || obj && 
                        this.dayjs(objTime).format('YYYY-MM-DD') != this.dayjs(nTime).format('YYYY-MM-DD')) {
                        data.push([])
                    }
                    obj = n
                    data[data.length - 1].push(n)
                });
                params.data = data
                return params
            }
        }
    }
</script>

<style lang="scss" scoped>
.answer{
    margin: 0 auto;
    min-width: 70%;
    max-width: 1200px;
    padding: 20px;
}

</style>